<template>
  <div class="container">
    <div class="right">
      <div class="top"></div>
      <div>
        <el-button-group style="">
          <el-button size="large" round>当前用户</el-button>
          <el-button size="large" round type="info">系统用户</el-button>
        </el-button-group>
      </div>
      <div class="item">
        <span>学生姓名：</span>
        <div>
          <el-input
            size="large"
            placeholder="请输入姓名"
            style="padding-top: 10px"
          >
            <template #append>
              <el-icon color="#409EFC" class="no-inherit" :size="40">
                <CirclePlus />
              </el-icon>
            </template>
          </el-input>
        </div>
        <!-- //时间选择器 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            size="large"
            style="margin-top: 13px"
          />
          <el-button size="large" type="primary" style="margin-left: 40px"
            >搜索</el-button
          >
          <el-button size="large" type="primary" style="margin-right: 40px"
            >导出
          </el-button>
        </div>

        <div class="bottom"></div>
      </div>
      <div class="custom-table">
        <el-table
          :data="tableData1"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :row-style="{ height: '70px' }"
          style="width: 100%  "
          ref="table"
          :header-cell-style="{
            borderTop: 'none',
            borderLeft: 'none',
            borderRight: 'none',
          }"
          border
          :cell-style="{
            // borderTop: ' 2px  dotted #a4cab6',
            // borderRight: 'none',
          }"
        >
      
          <el-table-column prop="no" label="序号" width="100"   v-if="showColumn.no"/>
      
          <el-table-column prop="name" label="姓名" width="120"    v-if="showColumn.name"/>
          <el-table-column prop="commstatus" label="学号" width="140"   v-if="showColumn.commstatus"/>
          <el-table-column prop="tricklecharge" label="院系" width="180"  v-if="showColumn.tricklecharge" />

          <el-table-column prop="soc" label="爱好" sortable width="120"  v-if="showColumn.soc" />
          <el-table-column
            prop="totalactivepower"
            label="专业"
            sortable
            width="120"
            v-if="showColumn.totalactivepower"
          />
          <el-table-column
            prop="chargingcapacity"
            label="是否就业"
            sortable
            width="120"
            v-if="showColumn.chargingcapacity"
          />
          <el-table-column
            prop="dischargecapacity"
            label="就业方向"
            sortable
            width="120"
            v-if="showColumn.dischargecapacity"
          />
          <el-table-column
            prop="cooltemp"
            label="论文方向"
            sortable
            width="140"
            v-if="showColumn.cooltemp"
          />
          <el-table-column prop="alarm" label="就业方向" sortable width="140"     v-if="showColumn.alarm"/>
          <el-table-column prop="current" label="阅读爱好" width="140"   v-if="showColumn.current" />
          <el-table-column prop="listconfig" label="基本操作" width="180"  >
            <el-button size="large" type="danger" style="margin-left: 40px"
              >删除</el-button
            >
          </el-table-column>
          <el-table-column fixed="right" width="100" align="center">
        <template v-slot:header>
          <!-- <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="showColumnOption"
          ></i> -->
          
          
          <el-icon  :size="22" cursor: pointer  @click="showColumnOption"><Setting /></el-icon>
        </template>
        
      </el-table-column>
    </el-table>
       
         <!-- 配置列面板 -->
    <transition name="fade">
      <div class="columnOption" v-show="isShowColumn">
        <div class="content">
          <div class="head">全部字段</div>
          <div class="body">
            <el-checkbox v-model="checkList.no">序号</el-checkbox>
            <el-checkbox v-model="checkList.name">姓名</el-checkbox>
            <el-checkbox v-model="checkList.commstatus">学号</el-checkbox>
            <el-checkbox v-model="checkList.tricklecharge">院系</el-checkbox>
            <el-checkbox v-model="checkList.soc">爱好</el-checkbox>
            <el-checkbox v-model="checkList.totalactivepower">专业</el-checkbox>
            <el-checkbox v-model="checkList.chargingcapacity">是否就业</el-checkbox>
            <el-checkbox v-model="checkList.alarm">就业方向</el-checkbox>
            <el-checkbox v-model="checkList.cooltemp">论文方向</el-checkbox>
            <el-checkbox v-model="checkList.current">阅读爱好</el-checkbox>
          </div>
          <div class="footer">
            <el-button size="small" type="primary" plain @click="saveColumn"
              >保存列配置</el-button
            >
          </div>
        </div>
      </div>
    </transition>
      </div>
      <el-pagination
        small
        background
        layout="->,prev, pager, next"
        :total="50"
        class="mt-4"
      />
    </div>
  </div>
</template>

<!-- <script>
//导入角色Api方法
import { List } from '../../api/role'
export default {
  name: 'UserRole',
  setup() {
    List()
  },
}
</script> -->

<style></style>

<script>
 import  {Setting } from '@element-plus/icons'

export default {
  name: 'SecondPage',
  components:{
    Setting 
  },
  data() {
    return {
      isShowColumn: false,
      tableData1: [
        {
          no: '1',
          name: '周鑫魏',
          commstatus: '201903024143',
          tricklecharge: '计算机与人工智能学院',
          soc: '看报',
          totalactivepower: '软件工程',
          chargingcapacity: '是',
          dischargecapacity: '开发',
          cooltemp: '后端',
          alarm: '开发',
          current: '计算机类',
          listconfig: '',
        },
        
        {
          no: '1',
          name: '周鑫魏',
          commstatus: '201903024143',
          tricklecharge: '计算机与人工智能学院',
          soc: '看报',
          totalactivepower: '软件工程',
          chargingcapacity: '是',
          dischargecapacity: '开发',
          cooltemp: '后端',
          alarm: '开发',
          current: '计算机类',
          listconfig: '',
        },
        
        {
          no: '',
          name: '',
          commstatus: '',
          tricklecharge: '',
          soc: '',
          totalactivepower: '',
          chargingcapacity: '',
          dischargecapacity: '',
          cooltemp: '',
          alarm: '',
          current: '',
          listconfig: '',
        },
        {
          no: '',
          name: '',
          commstatus: '',
          tricklecharge: '',
          soc: '',
          totalactivepower: '',
          chargingcapacity: '',
          dischargecapacity: '',
          cooltemp: '',
          alarm: '',
          current: '',
          listconfig: '',
        },
        {
          no: '',
          name: '',
          commstatus: '',
          tricklecharge: '',
          soc: '',
          totalactivepower: '',
          chargingcapacity: '',
          dischargecapacity: '',
          cooltemp: '',
          alarm: '',
          current: '',
          listconfig: '',
        },
        {
          no: '',
          name: '',
          commstatus: '',
          tricklecharge: '',
          soc: '',
          totalactivepower: '',
          chargingcapacity: '',
          dischargecapacity: '',
          cooltemp: '',
          alarm: '',
          current: '',
          listconfig: '',
        },
        {
          no: '',
          name: '',
          commstatus: '',
          tricklecharge: '',
          soc: '',
          totalactivepower: '',
          chargingcapacity: '',
          dischargecapacity: '',
          cooltemp: '',
          alarm: '',
          current: '',
          listconfig: '',
        },
      ],
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        no:true,
            name:true,
            commstatus:true,
            tricklecharge:true,
            soc:true,
            totalactivepower:true,
            chargingcapacity:true,
            alarm:true,
            cooltemp:true,
            current:true,
      },
    }
  },
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // 发请求得到checkListInitData的列的名字
    if (localStorage.getItem('columnSet')) {
      this.checkList = JSON.parse(localStorage.getItem('columnSet'))
    } else {
      this.checkList = {
        name:true,
            commstatus:true,
            tricklecharge:true,
            soc:true,
            totalactivepower:true,
            chargingcapacity:true,
            alarm:true,
            cooltemp:true,
            current:true,
      }
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    showColumnOption() {
      this.isShowColumn = true
    },
    saveColumn() {
      localStorage.setItem('columnSet', JSON.stringify(this.checkList))
      this.isShowColumn = false
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: auto;
  // background-color: #243340;
  display: flex;
  // position: absolute;

  .right {
    flex: 1;
    // background-color: #243340;

    display: flex;
    flex-direction: column;
    .top {
      height: 1px;
      top: 40px;
      position: relative;
      // background-color: #243340;
    }
    .item {
      font-size: 18px;
      align-items: center;
      display: flex;
      margin: 10px 0;
      // width: 140px;
      // background-color: #243340;
    }
    .bottom {
      flex: 1;
      // background-color: #243340;
    }
    div .div {
      display: inline-block;
      // width: 32%;
      height: 780px;
      margin: 5px;
      // background-color: #243340;
    }

    .DDD {
      margin-top: 5px;
    }
    .opera {
      display: inline;
    }
    .columnOption {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 80%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;
  .content {
    width: 100px;
    height: 100%;
    background-color: rgb(203, 223, 198);
    .head {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    .body {
      width: 100%;
      height: calc(100% - 88px);
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;
      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }
        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }
    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
  }
}
</style>
